<template>
  <n-modal
    v-model:show="showCompare"
    preset="dialog"
    class="rounded-[24px]"
    :title="$t('title.产品对比')"
    style="width: 1034px"
    :show-icon="false"
  >
    <div class="flex mt-[24px]">
      <div class="w-[200px] text-center items-center box box-1">
        <div class="h-[125px]">
          <div class="m-auto">
            <span class="text-[--main-color]">{{ compareGoods.length }}</span>
            {{ $t("title.条目数量") }}
          </div>
        </div>
        <div class="h-[46px]">
          <div class="m-auto">{{ $t("common.单价") }}（MXN）</div>
        </div>
        <div class="h-[90px]">
          <div class="m-auto">{{ $t("common.产品名称") }}</div>
        </div>
        <div class="h-[46px]">
          <div class="m-auto">{{ $t("common.销量") }}</div>
        </div>
        <div class="h-[46px]">
          <div class="m-auto">{{ $t("common.最小订购量") }}</div>
        </div>
        <div class="h-[46px]">
          <div class="m-auto">{{ $t("common.精选") }}</div>
        </div>
        <div class="h-[46px]">
          <div class="m-auto">{{ $t("common.店铺评级") }}</div>
        </div>
      </div>

      <div class="flex flex-1 overflow-auto box-2">
        <div
          class="w-[260px] box"
          :class="compareGoods.length > 4 ? '' : 'flex-1'"
          v-for="(item, i) in compareGoods"
          :key="i"
        >
          <div :class="compareGoods.length > 4 ? 'w-[260px]' : ' '" class="h-[125px]">
            <div class="flex-1 text-center">
              <div class="flex items-center">
                <div class="flex-1 text-left">
                  <!-- El lado izquierdo está fijo. -->
                </div>
                <n-icon
                  @click="onClickRemoveCompare(item.offerId)"
                  class="text-[#707070] cursor-pointer text-[20px]"
                >
                  <Close></Close>
                </n-icon>
              </div>

              <img
                class="w-[80px] m-auto"
                :src="
                  item.productImage?.whiteImage ||
                  (item.productImage?.images?.length ? item.productImage?.images[0] : '')
                "
              />
            </div>
          </div>
          <div class="h-[46px]">
            <div class="m-auto">
              <template v-if="!item.productSkuInfos || item.productSkuInfos.length == 0">
                {{ $t("common.无法购买") }}
              </template>
              <div class="flex" v-else>
                <money
                  class="m-auto"
                  :is-cny="false"
                  :money="
                    item.productSkuInfos[0]?.price ||
                    item.productSkuInfos[0]?.consignPrice
                  "
                ></money>
              </div>
            </div>
          </div>
          <div class="h-[90px]">
            <div
              class="cursor-pointer hover:text-[--main-color]"
              @click="goGoods(item.offerId)"
            >
              <n-ellipsis style="width: 100%" :tooltip="false" :line-clamp="3">
                {{ item.subjectTrans }}
              </n-ellipsis>
            </div>
          </div>
          <div class="h-[46px]">
            <div class="m-auto">
              {{ formatMoney(item.soldOut, 0) }}
            </div>
          </div>
          <div class="h-[46px]">
            <div class="m-auto">
              {{ formatMoney(item.minOrderQuantity, 0) }}
            </div>
          </div>
          <div class="h-[46px]">
            <div class="m-auto">
              <n-tag :bordered="false" :type="item.isJxhy ? 'success' : ''">
                {{ item.isJxhy ? $t("common.是") : $t("common.否") }}
              </n-tag>
            </div>
          </div>
          <div class="h-[46px]">
            <div class="m-auto" v-if="item.sellerDataInfo?.tradeMedalLevel > 0">
              <n-rate
                readonly
                :value="parseFloat(item.sellerDataInfo?.tradeMedalLevel)"
                allow-half
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  </n-modal>
</template>

<script setup>
import { ref, toRefs } from "vue";
import { formatMoney } from "@/utils/formatMoney";
import { Close } from "@vicons/ionicons5";
import { useCompare } from "@/stores/compare";
import money from "@/components/money";
import { goGoods } from "@/utils/common";
const showCompare = ref(false);
const { compareGoods } = toRefs(useCompare());
const { remove } = useCompare();

const show = () => {
  showCompare.value = true;
};
const onClickRemoveCompare = (offerId) => {
  remove(offerId);
};

defineExpose({ show });
</script>

<style lang="scss" scoped>
.box {
  > div {
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    display: flex;
    align-items: center;
    > div {
      padding: 8px;
    }
  }
}
.box-1 {
  border-top: 1px solid #ccc;
  font-size: 16px;
  font-weight: 300;
  > div {
    border-left: 1px solid #ccc;
    background-color: #ececec;
  }
}
.box-2 {
  > div {
    border-top: 1px solid #ccc;
  }
}
</style>
